<template>
    <div class="user-space-container">
        <el-container>
            <el-aside style="width: 10%;">
                <el-menu :default-active="activeMenuIndex" @select="handleMenuSelect">
                    <el-menu-item index="1">用户信息</el-menu-item>
                    <el-menu-item index="2">我的博客</el-menu-item>
                    <el-menu-item index="3">我的收藏</el-menu-item>
                    <el-menu-item index="4">我的点赞</el-menu-item>
                    <el-menu-item index="5">我的关注</el-menu-item>
                    <el-menu-item index="6">我的私信</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="width: 90%;">
                <UserInfoDisplayComponent :user-id="props.id" v-if="activeMenuIndex === '1'" />
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
    id: Number
})

const activeMenuIndex = ref('1')

const handleMenuSelect = (index: string) => {
    console.log('UserSpaceView--菜单选择:', activeMenuIndex.value, index)
    activeMenuIndex.value = index
}

// const fetchUser = async (id: number) => {
//     // throw new Error('Function not implemented.');
// }

// onMounted(() => {
//     fetchUser(props.id);
// })

// watch(() => props.id, (newId) => {
//     console.log('UserSpaceView--ID变化:', props.id, newId)
//     fetchUser(newId)
// })
</script>

<style scoped>
.user-space-container {
    width: 50%;
    margin: 0 auto;
}

.el-menu .el-menu-item {
    padding-left: 10px !important;
}
</style>
